<template>
    <div>
        <ul>
            <li :class="catalogue.data.class" @click="toLine">
                <div :id="`titleLine-${catalogue.data.id}`" class="title-line" :class="active ? 'active' : ''">
                    <a href="javascript:void(0)">{{catalogue.data.title}}</a>
                </div>
                <div class="next-container" :class="show ? 'show' : ''">
                    <slot></slot>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        name: "Catalogue",
        data() {
            return {
                show: false,
                active: false,
                position: 0,
                nextPosition: 0,
                nextParentPosition: 0,
            }
        },
        props: {
            catalogue: {
                default: () => {
                    return {
                            num: 0,
                            data: {
                                title: '',
                                id: '',
                                class: '',
                            },
                            children: [],
                            parent: '',
                    }
                },
                required: false,
                type: Object,
            },
            scrollTop: {
                default: 0,
                required: true,
                type: Number,
            },
        },
        watch: {
            scrollTop: {
                immediate: false,
                handler(newValue) {
                    this.initPosition();
                    this.show = newValue >= this.position && newValue < this.nextParentPosition;
                    this.active = newValue >= this.position && newValue < this.nextPosition;
                }
            }
        },
        methods: {
            /**
             * 切换子树显示
             */
            async toggle(event) {
                event.stopPropagation();
                this.show = !this.show;
            },
            /**
             * 滚动至锚点位置
             */
            async toLine(event) {
                let parent = $('.markdown-body').parent()[0];

                // 滚动条滚动
                parent.scrollTo({ top: this.position, behavior: 'smooth' })

                // 判断滚动条是否触底，触底则打开ul
                let clientHeight = parent.clientHeight;
                // 有误差，需要 +1
                let scrollTop = parent.scrollTop + 1;
                let scrollHeight = parent.scrollHeight;

                /*
                 *  this.position >= scrollTop 防止滚动条触底后，点击之前的目录，打开ul
                 * scrollHeight == clientHeight 无滚动条的情况
                 */
                if (scrollHeight == clientHeight || this.position >= scrollTop && clientHeight + scrollTop >= scrollHeight) {
                    this.toggle(event)
                }
            },
            /**
             * 初始化锚点位置信息
             */
            initPosition() {
                let nowLi = $(`#${this.catalogue.data.id}`).parent();
                let nextLi = null;
                if (this.catalogue.next) {
                    nextLi = $(`#${this.catalogue.next.data.id}`).parent();
                }
                let containerOffsetTop = document.getElementsByClassName('markdown-body')[0].offsetTop;
                this.position = nowLi[0].offsetTop - containerOffsetTop;


                // 最后一个标题的范围 [? ~ Number.MAX_VALUE]
                if (!nextLi) {
                    this.nextPosition = Number.MAX_VALUE;
                    this.lastChildrenPosition = Number.MAX_VALUE;
                } else {
                    this.nextPosition = nextLi[0].offsetTop - containerOffsetTop;
                    this.nextParentPosition = this.nextPosition;
                    if (this.catalogue.children.length != 0) {
                        let children = this.catalogue.children;
                        let next = children[children.length - 1].next;
                        if (!next) {
                            return;
                        }
                        this.nextParentPosition =  $(`#${next.data.id}`).parent()[0].offsetTop - containerOffsetTop;
                    }
                }
                // console.log(this.catalogue)

            }
        },
        mounted() {
            this.initPosition();
        }
    }
</script>

<style scoped>
    a {
        color: black;
    }
    li {
        list-style: none;
    }
    li:hover {
        cursor: pointer;
    }
    .title-line {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .title-line:hover {
        background-color: #7aaffe;
    }
    .title-line:hover a, .active a{
        color: #fff;
    }
    .next-container {
        display: none;
    }
    .active {
        background-color: #7aaffe;
    }
    .show{
        display: block;
    }


    .h1-li .title-line{
        font-size: 20px;
        padding-left: 1rem;
    }
    .h2-li .title-line{
        font-size: 18px;
        padding-left: 2rem;
    }
    .h3-li .title-line{
        font-size: 16px;
        padding-left: 3rem;
    }
    .h4-li .title-line{
        font-size: 14px;
        padding-left: 4rem;
    }
    .h5-li .title-line{
        font-size: 12px;
        padding-left: 5rem;
    }
    .h6-li .title-line{
        font-size: 10px;
        padding-left: 6rem;
    }
</style>